import React ,{useState}from 'react';

const Todo = () => {
    const [text, setText] = useState("");
    const [list, setlist] = useState([1,2,3,4,5]);
    const handleChange=(e)=>{
        setText(e.target.value)
    }
    const handleAdd=()=>{
        setlist([text,...list])
        setText("")
    }
    const handleDelete=(index)=>{
        let newList=[...list]
        newList.splice(index,1)
        setlist(newList)
    }
    return (
        <div>
            <input value={text} onChange={handleChange}/>
            <button onClick={handleAdd}>添加</button>
            {list.map((item,index)=>
                <li key={index}>
                    {item}
                    <span style={{color:'red'}} onClick={()=>handleDelete(index)}>x</span>
                </li>
            )}
        </div>
    );
    
}

export default Todo;
